<div class="container">
  <div class="row">
    <div class="col-md-12">
      <h1>Choose your username</h1>
      <br>

      <p>
        Every asciinema user gets a profile page at
        <a href="#"><%= root_url() %>~<strong>username</strong></a>.
      </p>

      <%= form_for @changeset, Routes.username_path(@conn, :create), [class: "username-form", method: :post], fn f -> %>
        <div class="form-group">
          <label for="user_username">Your username:</label>
          <%= text_input f, :username, class: "form-control", "data-behavior": "focus" %>

          <%= case assigns[:error] do %>
          <% nil -> %>
          <% :username_invalid -> %>
            <br>
            <p class="text-danger">
              Use only letters, digits and "-" character.
              <br>
              Examples: <em>johndoe, gosia3000, ultimate-debugger</em>
            </p>
          <% :username_taken -> %>
            <br>
            <p class="text-danger">
              This username is already taken.
            </p>
          <% end %>
        </div>

        <div class="form-group">
          <%= submit "Continue", class: "btn btn-primary" %>
          <%= link "I'll do it later", to: Routes.username_path(@conn, :skip), class: "btn" %>
        </div>
      <% end %>
    </div>
  </div>
</div>
